<template>
  <div>
    <el-container style="flex-wrap: wrap;">
      <!-- 头部 -->
      <!-- 头部导航栏 -->
      <BreadHeader></BreadHeader>
      <!-- 主体内容部分 -->
      <XPannel>
        <template v-slot:header>
          <span>报修管理</span>
          <el-button
            type="primary"
            plain
            style="padding: 10px 20px; float: right"
            @click="applybtn"
            >报修申请</el-button
          >
          <el-button
            @click="download()"
            type="info"
            style="float: right; padding: 10px 15px; margin-right: 15px"
            >导出Excel</el-button
          >
        </template>
        <!-- 列表主体内容 -->
        <template v-slot:default>
          <!-- 索索栏目 -->
          <el-form
            :model="searchruleForm"
            ref="searchruleForm"
            label-width="100px"
            class="demo-ruleForm"
            style="height: 125px"
          >
            <!-- 搜索栏--第一行 -->
            <el-row type="flex" :gutter="20">
              <el-col :span="7">
                <el-form-item label="手机号" prop="mobile">
                  <el-input
                    v-model="searchruleForm.mobile"
                    style="width: 80%"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="损坏位置" prop="position">
                  <el-input
                    v-model="searchruleForm.position"
                    style="width: 80%"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="损坏信息" prop="emimf">
                  <el-input
                    v-model="searchruleForm.emimf"
                    style="width: 80%"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 搜索栏--第二行 -->
            <el-row type="flex" :gutter="20">
              <el-col :span="7">
                <el-form-item label="用户类型" prop="urole">
                  <el-select
                    v-model="searchruleForm.urole"
                    placeholder="请选择用户类型"
                    clearable
                    style="width: 80%"
                  >
                    <el-option label="学生" value="1"></el-option>
                    <el-option label="老师" value="2"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="用户类型" prop="emtype">
                  <el-select
                    v-model="searchruleForm.emtype"
                    placeholder="请选择损坏类型"
                    style="width: 80%"
                    clearable
                  >
                    <el-option label="自然损坏" value="1"></el-option>
                    <el-option label="人为损坏" value="2"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="报修状态" prop="status">
                  <el-select
                    v-model="searchruleForm.status"
                    placeholder="请选择报修状态"
                    style="width: 80%"
                    clearable
                  >
                    <el-option label="待审核" value="0"></el-option>
                    <el-option label="通过" value="1"></el-option>
                    <el-option label="处理中" value="2"></el-option>
                    <el-option label="完成" value="3"></el-option>
                    <el-option label="撤销" value="-1"></el-option>
                    <el-option label="不通过" value="-2"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 搜索按钮--绝对定位 -->
            <el-button
              type="primary"
              @click="searchusers"
              style="position: relative; top: -90px; left: 85%"
              ><i class="el-icon-search"></i>搜索</el-button
            >
          </el-form>
          <!-- 报修申请-抽屉 -->
          <el-drawer
            title="报修申请"
            :visible.sync="dialog"
            direction="rtl"
            custom-class="demo-drawer"
            ref="drawer"
            style="text-align: center"
          >
            <div class="demo-drawer__content">
              <el-form
                :model="form"
                ref="addForm"
                :rules="rules"
                label-width="100px"
                class="demo-ruleForm"
                style="text-align: center;"
              >
                <!-- let { mobile, urole, emtype, position, emimf, extime, picture } = body -->
                <!-- "urole": "1", //角色：1 学生 、   2 老师
                "emtype": "2", //报修类型：1 自然损坏  、2 人为损坏 -->
                <el-form-item
                  label="手机号"
                  :label-width="formLabelWidth"
                  style="width: 400px; margin: 20px auto"
                  prop="mobile"
                >
                  <el-input
                    v-model="form.mobile"
                    autocomplete="off"
                    style="width: 300px"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="角色"
                  :label-width="formLabelWidth"
                  style="width: 400px; margin: 20px auto"
                  prop="urole"
                >
                  <el-select
                    v-model="form.urole"
                    placeholder="请选择对应角色"
                    style="width: 300px"
                  >
                    <el-option label="学生" value="1"></el-option>
                    <el-option label="老师" value="2"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="报修类型"
                  :label-width="formLabelWidth"
                  style="width: 400px; margin: 20px auto"
                  prop="emtype"
                >
                  <el-select
                    v-model="form.emtype"
                    placeholder="请选择对应报修类型"
                    style="width: 300px"
                  >
                    <el-option label="自然损坏" value="1"></el-option>
                    <el-option label="人为损坏" value="2"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="报修地点"
                  :label-width="formLabelWidth"
                  style="width: 400px; margin: 20px auto"
                  prop="position"
                >
                  <el-input
                    v-model="form.position"
                    autocomplete="off"
                    style="width: 300px"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="报修详细"
                  :label-width="formLabelWidth"
                  style="width: 400px; margin: 20px auto"
                  prop="emimf"
                >
                  <el-input
                    v-model="form.emimf"
                    autocomplete="off"
                    style="width: 300px"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="预期时间"
                  :label-width="formLabelWidth"
                  style="width: 400px; margin: 20px auto"
                  prop="extime"
                >
                  <!-- 快捷选择时间 -->
                  <template>
                    <div class="block">
                      <el-date-picker
                        v-model="form.extime"
                        type="datetime"
                        default-time="12:00:00"
                        style="width: 300px"
                      >
                      </el-date-picker>
                    </div>
                  </template>

                  <!-- <el-input
                    v-model="form.extime"
                    autocomplete="off"
                    style="width: 300px"
                  ></el-input> -->
                </el-form-item>
                <!-- <el-form-item> -->
                <el-button type="primary" @click="submitForm_add('addForm')"
                  >申请</el-button
                >
                <el-button @click="resetForm('addForm')" style="margin-right: 70px">重置</el-button>
                <!-- </el-form-item> -->
              </el-form>
            </div>
          </el-drawer>
          <!-- 报修列表-- -->
          <!-- arr.push({ id, date, type, imf, position, mobile }) -->
          <el-table
            ref="multipleTable"
            :data="repairelist"
            tooltip-effect="dark"
            style="width: 100%; margin: auto"
            @selection-change="handleSelectionChange"
            height="450"
            border
          >
            <el-table-column label="全选" type="selection" width="50">
            </el-table-column>
            <el-table-column prop="id" label="ID" width="50"> </el-table-column>
            <el-table-column prop="mobile" label="手机号" width="130">
            </el-table-column>
            <el-table-column label="人员类型" width="100">
              <template slot-scope="scope">
                <span v-if="scope.row.type == 1"> 学生 </span>
                <span v-else-if="scope.row.type == 2"> 老师 </span>
              </template>
            </el-table-column>
            <el-table-column label="损坏类型" width="100">
              <template slot-scope="scope">
                <span v-if="scope.row.repairetype == 1">
                  <el-tag type="success">自然损坏</el-tag>
                </span>
                <span v-else-if="scope.row.repairetype == 2">
                  <el-tag type="danger">人为损坏</el-tag>
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="imf" label="损坏描述" width="150">
            </el-table-column>
            <el-table-column prop="position" label="损坏位置" width="130">
            </el-table-column>
            <el-table-column prop="extime" label="预期处理时间" width="150">
            </el-table-column>
            <el-table-column label="报修状态" width="100">
              <template slot-scope="scope">
                <span v-if="scope.row.status == 0">
                  <el-tag type="info">待审核</el-tag>
                </span>
                <span v-else-if="scope.row.status == 1">
                  <el-tag type="success">通过</el-tag>
                </span>
                <span v-else-if="scope.row.status == 2">
                  <el-tag type="warning">处理中</el-tag>
                </span>
                <span v-else-if="scope.row.status == 3">
                  <el-tag>完成</el-tag>
                </span>
                <span v-else-if="scope.row.status == -1">
                  <el-tag type="warning">撤销</el-tag>
                </span>
                <span v-else-if="scope.row.status == -2">
                  <el-tag type="danger">不通过</el-tag>
                </span>
              </template>
            </el-table-column>
            <el-table-column label="负责工人" width="110">
              <template slot-scope="scope">
                <span v-if="scope.row.uname == null"> 暂未安排工人 </span>
                <span v-else>{{ scope.row.uname }}</span>
              </template>
            </el-table-column>
            <!-- repairetype -->
            <el-table-column prop="caozuo" label="操作">
              <template #default="scope">
                <el-button
                  @click="xiugaiobtain(scope.row)"
                  type="primary"
                  style="margin-left: 16px; padding: 5px 10px"
                >
                  <i class="el-icon-edit"></i>
                  编辑
                </el-button>
                <el-button
                  type="danger"
                  @click="open(scope.row)"
                  style="padding: 5px 10px"
                  ><i class="el-icon-delete"></i> 删除</el-button
                >
                <el-button
                  @click="toworkerfn(scope.row)"
                  type="warning"
                  style="margin-left: 16px; padding: 5px 10px"
                >
                  <i class="el-icon-thumb"></i>
                  指定工人
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 指定工人弹框 -->
          <el-dialog
            title="选择工人"
            :visible.sync="dialogFormVisible"
            width="500px"
          >
            <template>
              <el-select
                v-model="value_worker"
                placeholder="请选择维修师傅"
                style="width: 300px"
              >
                <el-option
                  v-for="item in form_worker"
                  :key="item.value"
                  :label="item.uname"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </template>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" :plain="true" @click="ent_worker"
                >确 定</el-button
              >
            </div>
          </el-dialog>
          <!-- 批量操作 -->
          <div class="piliang" style="width: 300px; background: #ffffff">
            <el-button
              type="danger"
              @click="batchDelete"
              style="padding: 10px 15px; margin: 20px 0px"
              >批量删除</el-button
            >
            <el-button
              @click="toggleSelection()"
              type="primary"
              style="padding: 10px 15px; margin: 20px 10px"
              >取消选择</el-button
            >
            <!-- <el-button @click="clearSelection">取消批量</el-button> -->
          </div>
          <!-- 页码显示 -->
          <div
            class="block"
            style="padding-bottom: 15px; max-width: 600px; margin: auto"
          >
            <el-pagination
              :page-sizes="[5, 15, 20]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalUsers"
              @size-change="handleChangeSize"
              @current-change="handleCurrentChange"
            >
            </el-pagination>
          </div>
          <!-- 修改报修信息 -->
          <el-drawer
            title="修改报修信息"
            :visible.sync="editdialog"
            direction="rtl"
            custom-class="demo-drawer"
            ref="drawer2"
            style="text-align: center"
          >
            <div class="demo-drawer__content">
              <el-form
                :model="editform"
                :rules="rules"
                ref="saveEdit"
                label-width="100px"
                class="demo-ruleForm"
              >
                <!-- let { mobile, urole, emtype, position, emimf, extime, picture } = body -->
                <!-- "urole": "1", //角色：1 学生 、   2 老师
                "emtype": "2", //报修类型：1 自然损坏  、2 人为损坏 -->
                <el-form-item
                  label="手机号"
                  :label-width="formLabelWidth"
                  style="width: 400px; margin: 20px auto"
                  prop="mobile"
                >
                  <el-input
                    v-model="editform.mobile"
                    autocomplete="off"
                    style="width: 300px"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="人员类型"
                  :label-width="formLabelWidth"
                  style="width: 400px; margin: 20px auto"
                  prop="urole"
                >
                  <el-select
                    v-model="editform.urole"
                    placeholder="请选择对应角色"
                    style="width: 300px"
                  >
                    <el-option label="学生" :value="1"></el-option>
                    <el-option label="老师" :value="2"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="报修类型"
                  :label-width="formLabelWidth"
                  style="width: 400px; margin: 20px auto"
                  prop="emtype"
                >
                  <el-select
                    v-model="editform.emtype"
                    placeholder="请选择对应报修类型"
                    style="width: 300px"
                  >
                    <el-option label="自然损坏" :value="1"></el-option>
                    <el-option label="人为损坏" :value="2"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item
                  label="报修地点"
                  :label-width="formLabelWidth"
                  style="width: 400px; margin: 20px auto"
                  prop="position"
                >
                  <el-input
                    v-model="editform.position"
                    autocomplete="off"
                    style="width: 300px"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="报修详细"
                  :label-width="formLabelWidth"
                  style="width: 400px; margin: 20px auto"
                  prop="emimf"
                >
                  <el-input
                    v-model="editform.emimf"
                    autocomplete="off"
                    style="width: 300px"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="预期时间"
                  :label-width="formLabelWidth"
                  style="width: 400px; margin: 20px auto"
                  prop="extime"
                >
                  <template>
                    <div class="block">
                      <el-date-picker
                        v-model="editform.extime"
                        type="datetime"
                        default-time="12:00:00"
                        style="width: 300px"
                      >
                      </el-date-picker>
                    </div>
                  </template>
                  <!-- <el-input
                    v-model="editform.extime"
                    autocomplete="off"
                    style="width: 300px"
                  ></el-input> -->
                </el-form-item>
                <!-- 单独修改状态 -->
                <el-button
                  @click="revoke"
                  :plain="true"
                  style="margin: 20px 0px"
                  type="danger"
                >
                  撤销
                </el-button>
                <el-button
                  @click="no_pass"
                  :plain="true"
                  type="warning"
                  :autofocus="true"
                >
                  不通过
                </el-button>
                <el-button @click="handling" :plain="true" type="info">
                  处理中
                </el-button>
                <el-button @click="pass" :plain="true" type="success">
                  通过
                </el-button>
                <el-button @click="complete" :plain="true" type="primary">
                  完成
                </el-button>
                <br />
                <el-button type="primary" @click="submitForm('saveEdit')"
                  >提交</el-button
                >
                <el-button
                  @click="resetForm('saveEdit')"
                  style="margin-right: 70px"
                  >重置</el-button
                >
              </el-form>
            </div>
          </el-drawer>
        </template>
      </XPannel>
    </el-container>
  </div>
</template>

<script>
import http from "@/api/http";
import XPannel from "@/components/XPannel.vue";
import * as XLSX from "xlsx";
import { mapState } from "vuex";
import BreadHeader from "@/components/BreadHeader.vue";

export default {
  components: {
    XPannel,
    BreadHeader
  },
  computed: {
    ...mapState(["name","picture"]),
    userName() {
      return this.name;
    },
    userPicture() {
      return this.picture;
    },
  },
  data() {
    var validatePhone = (rule, value, callback) => {
      const pattern = /^1[3456789]\d{9}$/;
      if (!value) {
        return callback(new Error("手机号不能为空"));
      } else if (!pattern.test(value)) {
        return callback(new Error("请输入正确格式的手机号"));
      } else {
        return callback();
      }
    };
    return {
      dialog: false,
      editdialog: false,
      loading: false,
      form: {
        mobile: "",
        urole: null,
        emtype: null,
        position: "",
        emimf: "",
        extime: "",
        picture: "",
      },
      editform: {
        mobile: "",
        urole: null,
        emtype: null,
        position: "",
        emimf: "",
        extime: "",
        picture: "",
      },
      // let { mobile, urole, emtype, position, emimf,date} = req.query;
      // 对应搜索的数据
      searchruleForm: {
        mobile: "",
        urole: null,
        emtype: null,
        position: "",
        emimf: "",
        status: null,
      },
      rules: {
        mobile: [{ validator: validatePhone, trigger: "blur" }],
        urole: [
          { required: true, message: "请选择角色类型", trigger: "change" },
        ],
        emtype: [
          { required: true, message: "请选择损坏类型", trigger: "change" },
        ],
        position: [
          { required: true, message: "请输入报修地点", trigger: "blur" },
          { min: 5, max: 30, message: "长度在2-30个字符", trigger: "blur" },
        ],
        emimf: [
          { required: true, message: "请输入损坏详细信息", trigger: "blur" },
          { min: 5, max: 30, message: "长度在2-30个字符", trigger: "blur" },
        ],
        extime: [
          { required: true, message: "请输入预期处理时间", trigger: "change" },
          // { required: true, message: "请输入预期处理时间", trigger: "blur" },
          // { min: 9, max: 30, message: "长度在9-30个字符", trigger: "blur" },
        ],
      },
      formLabelWidth: "80px",
      timer: null,
      fileList: [
        {
          name: "food.jpeg",
          url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        },
        {
          name: "food2.jpeg",
          url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        },
      ],
      repairelist: [], //显示列表
      totalUsers: 0, //总数
      pageSize: 5, //每页条数--默认
      pageNum: 1, //当前页码
      deluserid: null,
      modifylisy: {
        mobile: "",
        urole: null,
        emtype: null,
        position: "",
        emimf: "",
        extime: "",
        picture: "",
      },
      xiugaiobtainuid: null,
      xiugaiobtain_id: null,
      // 快捷时间设置
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      // 指定维修师傅
      workerlist: [],
      dialogFormVisible: false,
      formLabelWidth_work: "100px",
      form_worker: [],
      value_worker: null,
      toworkerid: null,
    };
  },
  methods: {
    // 导出EXCEL文件方法
    download() {
      const data = this.repairelist;

      // 构造包含总标题和表头的二维数组
      const headers = [
        "用户id",
        "预期处理时间",
        "人员类型",
        "损坏描述",
        "损坏位置",
        "手机号",
        "损坏类型",
        "报修状态",
        "负责工人id",
        "报修不通过原因",
        "负责工人姓名",
      ]; // 表头
      const title = ["报修列表"]; // 总标题
      const worksheetData = [
        title,
        headers,
        ...data.map((item) => Object.values(item)),
      ]; // 数据

      // 将二维数组转换为工作表
      const worksheet = XLSX.utils.aoa_to_sheet(worksheetData);

      // 设置总标题的样式
      const cellTitleRef = XLSX.utils.encode_cell({ c: 0, r: 0 }); // 获取总标题单元格的位置
      const cellTitle = worksheet[cellTitleRef];
      cellTitle.s = {
        alignment: {
          horizontal: "center", // 水平居中
          vertical: "center", // 垂直居中
        },
      };

      // 创建工作簿并添加工作表
      const workbook = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");

      // 导出Excel文件
      XLSX.writeFile(workbook, "报修列表.xlsx");
    },
    // 单独修改状态的方法
    revoke() {
      //撤销
      http
        .get("/baoxiu/status/" + this.xiugaiobtain_id, {
          params: {
            status: -1,
          },
        })
        .then((response) => {
          console.log(response);
          this.$message("状态已经修改为撤销！");
          this.userlistfn();
        })
        .catch((error) => {
          console.log(error);
        });
    },
    no_pass() {
      //不通过
      http
        .get("/baoxiu/status/" + this.xiugaiobtain_id, {
          params: {
            status: -2,
          },
        })
        .then((response) => {
          console.log(response);
          this.$message.error("状态已经修改为不通过！");
          this.userlistfn();
        })
        .catch((error) => {
          console.log(error);
        });
    },
    handling() {
      //处理中
      http
        .get("/baoxiu/status/" + this.xiugaiobtain_id, {
          params: {
            status: 2,
          },
        })
        .then((response) => {
          console.log(response);
          this.$message("状态已经修改为处理中！");
          this.userlistfn();
        })
        .catch((error) => {
          console.log(error);
        });
    },
    pass() {
      //通过
      http
        .get("/baoxiu/status/" + this.xiugaiobtain_id, {
          params: {
            status: 1,
          },
        })
        .then((response) => {
          console.log(response);
          this.$message({
            message: "状态已经修改为通过！",
            type: "success",
          });
          this.userlistfn();
        })
        .catch((error) => {
          console.log(error);
        });
    },
    complete() {
      //完成
      http
        .get("/baoxiu/status/" + this.xiugaiobtain_id, {
          params: {
            status: 3,
          },
        })
        .then((response) => {
          console.log(response);
          this.$message({
            message: "状态已经修改为完成！",
            type: "success",
          });
          this.userlistfn();
        })
        .catch((error) => {
          console.log(error);
        });
    },
    // 搜索功能
    searchusers() {
      http
        .get("/baoxiu/search", {
          params: {
            mobile: this.searchruleForm.mobile.replace(/\s+/g, ""),
            urole: this.searchruleForm.urole,
            emtype: this.searchruleForm.emtype,
            position: this.searchruleForm.position.replace(/\s+/g, ""),
            emimf: this.searchruleForm.emimf.replace(/\s+/g, ""),
            status: this.searchruleForm.status,
            page: this.pageNum,
            page_size: this.pageSize,
          },
        })
        .then((res) => {
          console.log(res);
          this.repairelist = res.data;
          this.totalUsers = res.total;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    // 申请报修
    submitForm_add(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.apply();
          this.userlistfn();
          this.$message({
            message: "恭喜你，报修申请成功！",
            type: "success",
          });
          this.dialog = false;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //重置
    // resetForm_add(formName) {
    //     console.log('0000')
    //     this.$refs[formName].resetFields();
    // },
    // 修改提交--修改
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.edit_save();
          this.$message({
            message: "恭喜你，报修信息修改成功！",
            type: "success",
          });
          this.editdialog = false;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 报修修改--获取信息
    xiugaiobtain(row) {
      this.editdialog = true;
      this.xiugaiobtain_id = row.id;
      console.log(row.id);
      http
        .get("/baoxiu/edit/" + row.id)
        /*
        extime: "2024-7-23 15:00"
        id: 1
        imf: "灯泡不亮了，水龙头坏了"
        mobile: "15527098790"
        position: "209寝室厕所"
        repairetype: "人为损坏"
        type: "老师"
         */
        .then((response) => {
          console.log(response);
          this.xiugaiobtainuid = response.data[0].id;
          this.editform.mobile = response.data[0].mobile;
          this.editform.urole = response.data[0].type;
          this.editform.emtype = response.data[0].repairetype;
          this.editform.position = response.data[0].position;
          this.editform.emimf = response.data[0].imf;
          this.editform.extime = response.data[0].extime;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    // 指定工人方法
    toworkerfn(row) {
      console.log(row);
      this.dialogFormVisible = true;
      this.toworkerid = row.id;
    },
    ent_worker() {
      http
        .get("/baoxiu/toworker/" + this.toworkerid, {
          params: {
            workerid: this.value_worker,
          },
        })
        .then((response) => {
          console.log(response);
          this.$message({
            message: "成功委派维修师傅！",
            type: "success",
          });
          this.userlistfn();
          this.dialogFormVisible = false;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    // 报修修改--报存信息
    edit_save() {
      // http
      // mobile, emtype, urole, position, emimf, extime
      let data = {
        mobile: this.editform.mobile,
        urole: this.editform.urole,
        emtype: this.editform.emtype,
        position: this.editform.position,
        emimf: this.editform.emimf,
        extime: this.editform.extime,
      };
      console.log(data);

      // .post("/baoxiu/save_edit/" + this.xiugaiobtainuid, {
      //   mobile: this.editform.mobile,
      //   urole: this.editform.urole,
      //   emtype: this.editform.emtype,
      //   position: this.editform.position,
      //   emimf: this.editform.emimf,
      //   extime: this.editform.extime,
      // })
      // .then((response) => {
      //   console.log(response);
      //   this.userlistfn();
      //   this.drawer = false;
      // })
      // .catch((error) => {
      //   console.log(error);
      // });
    },
    // 单个删除
    deleteuserfn() {
      http
        .get("/baoxiu/delete/" + this.deluserid)
        .then((response) => {
          console.log(response);
        })
        .catch((error) => {
          console.log(error);
        });
    },
    open(row) {
      this.$confirm("此操作将永久删除该报修申请, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log(1, row);
          // this.deluserid = this.userlist[row].id
          this.deluserid = row.id;
          this.deleteuserfn();
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.userlistfn();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 批量删除--待处理
    batchDelete() {
      if (this.selected.length === 0) {
        this.$message({
          message: "请先选择要删除的项",
          type: "warning",
        });
        return;
      }
      this.$confirm("此操作将永久删除选中的报修申请, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 批量删除---代办--ok
          this.selected.forEach((item) => {
            // const index = this.userlist.indexOf(item);
            let deluserids = [];
            deluserids.push(item.id);
            let deluseridsting = JSON.stringify(deluserids);
            http
              .get("/baoxiu/deletes/" + deluseridsting)
              .then((response) => {
                console.log(response);
              })
              .catch((error) => {
                console.log(error);
              });
            this.userlistfn();
            // this.userlist.splice(index, 1);
          });
          this.selected = []; // 清空选中的项
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 全选按钮
    handleSelectionChange(val) {
      this.selected = val;
      console.log(this.selected);
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    // 页码设置
    handleChangeSize(data) {
      this.pageSize = data;
      // 检查searchruleForm中的每个字段是否都等于其初始值
      const isAllDefaults = Object.values(this.searchruleForm).every(
        (value) => {
          return value === "" || value === null;
        }
      );
      if (isAllDefaults) {
        // 如果所有字段都是初始值，则调用userlistfn
        this.userlistfn();
      } else {
        // 否则，调用searchusers
        this.searchusers();
      }
    },
    handleCurrentChange(data) {
      this.pageNum = data;
      // this.pageSize = data;
      // 检查searchruleForm中的每个字段是否都等于其初始值
      const isAllDefaults = Object.values(this.searchruleForm).every(
        (value) => {
          return value === "" || value === null;
        }
      );
      if (isAllDefaults) {
        // 如果所有字段都是初始值，则调用userlistfn
        this.userlistfn();
      } else {
        // 否则，调用searchusers
        this.searchusers();
      }
    },
    // 报修列表
    userlistfn() {
      http
        .get("/baoxiu/list", {
          params: {
            page: this.pageNum,
            page_size: this.pageSize,
          },
        })
        .then((response) => {
          console.log(response);
          console.log(response.data);
          // 第二种方法：————前一种方法为行间v-if
          // for (let i = 0; i <= response.data.list.length; i++) {
          //   if (response.data.list[i].status === 0) {
          //     response.data.list[i].status = "待审核";
          //   } else if (response.data.list[i].status === -1) {
          //     response.data.list[i].status = "撤销";
          //   } else if (response.data.list[i].status === -2) {
          //     response.data.list[i].status = "不通过";
          //   } else if (response.data.list[i].status === 1) {
          //     response.data.list[i].status = "通过";
          //   } else if (response.data.list[i].status === 2) {
          //     response.data.list[i].status = "处理中";
          //   } else if (response.data.list[i].status === 3) {
          //     response.data.list[i].status = "完成";
          //   }
          // }
          this.repairelist = response.data.list;
          // form_worker
          console.log(this.repairelist);
          this.totalUsers = response.data.totalNum;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    // 人员列表
    peoplelistfn() {
      http
        .get("/baoxiu/people_list")
        .then((res) => {
          console.log(res);
          let peoplelist = res.data;
          console.log(peoplelist);
          this.form_worker = peoplelist.filter((value) => value.part == 3);
        })
        .catch((error) => {
          console.log(error);
        });
    },
    // 上传图片
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },

    apply() {
      // let { mobile, urole, emtype, position, emimf, extime, picture } = body
      // 报修申请
      http
        .post("/baoxiu/apply", {
          mobile: this.form.mobile,
          urole: this.form.urole,
          emtype: this.form.emtype,
          position: this.form.position,
          emimf: this.form.emimf,
          extime: this.form.extime,
          picture: this.fileList.url,
        })
        .then((res) => {
          console.log(res);
        })
        .catch((error) => {
          console.log(error);
        });
    },
    applybtn() {
      this.dialog = true;
    },
  },
  created() {
    this.userlistfn();
    this.peoplelistfn();
  },
};
</script>
<style>
</style>